<template>
  <!-- 搜索 -->
  <t-card class="list-card">
     <!-- 自定义搜索 -->
     <custom-search ref="customSearchRef" v-slot="{ params }" @submit="handleInitTable">
      <t-col :span="3">
      <t-form-item label="配置名" name="name">
        <t-input
          v-model="params.name"
          placeholder="请输入配置名"
          clearable
        />
      </t-form-item>
    </t-col>
    <t-col :span="3">
      <t-form-item label="存储器" name="storage">
        <t-select
          v-model="params.storage"
          filterable
          placeholder=""
          clearable
          :options="dictionaryStore.get('infra_file_storage')"
          
        >
        </t-select>
      </t-form-item>
    </t-col>
    <t-col :span="3">
        <t-form-item label="创建时间" name="createTime">
          <t-date-range-picker
            allow-input
            v-model:value="params.createTime"
            clearable
            enable-time-picker
            placeholder=" "
            style="width: 100%"
          />
        </t-form-item>
      </t-col>
    
  </custom-search>
   <!-- 自定义表格 -->
   <custom-table
      ref="customTableRef"
      row-key="id"
      :columns="columns"
      :api="fileConfigCRUD.page"
      column-controller-key="fileConfigList"
    > 
    <template #topContent>
        <div style="margin-bottom: var(--td-comp-margin-xxl)">
          <t-button
            v-permission="['infra:file-config:create']"
            @click="handleOpenDialog('create',{config:{}})"
          >
            新建文件配置
          </t-button>
        </div>
      </template>
      <template #storage="{ row }">
        <t-tag
          theme="primary"
        >{{ dictionaryStore.analysis('infra_file_storage', row.storage) }}
      </t-tag>
      </template>
      <template #master="{ row }">
        <t-tag
          :theme="row.master ? 'danger' : 'default'"
        >{{ dictionaryStore.analysis('infra_boolean_string', row.master) }}</t-tag>
      </template>
      <template #createTime="{ row }">
        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template #op="{ row }">
        <t-space>
          <t-link
            v-permission="['infra:file-config:update']"
            theme="primary"
            @click="handleOpenDialog('update', { id: row.id })"
          >
            编辑
          </t-link>

          <t-popconfirm content="确认要修改该项配置吗？" @confirm="handleMaster(row.id)">
            <t-link v-permission="['infra:file-config:update']" theme="primary"> 主配置 </t-link>
          </t-popconfirm>
          <t-link theme="primary" variant="text" @click="handleTest(row.id)">
            测试
          </t-link>
          <t-popconfirm content="确认要删除该项吗？" @confirm="handleDelete({ id: row.id })">
            <t-link v-permission="['infra:file-config:delete']" theme="danger"> 删除 </t-link>
          </t-popconfirm>
        </t-space>
      </template>
    </custom-table>
  

  <!-- 自定义对话框 -->
  <custom-dialog
      ref="customDialogRef"
      v-slot="{ formData, readonly }"
      :api-map="fileConfigCRUD"
      header="*文件配置"
      @request-success="handleDialogRequestSuccess"
    >
      <t-form-item label="配置名" name="name" :rules="[{ required: true, message: '配置名不能为空' }]">
        <t-input v-model="formData.name" placeholder="请输入配置名" :readonly="readonly" />
      </t-form-item>
      <t-form-item label="备注" name="remark">
        <t-input v-model="formData.remark" placeholder="请输入备注" :readonly="readonly" />
      </t-form-item>
      <t-form-item label="存储器" name="storage" :rules="[{ required: true, message: '存储器不能为空' }]">
        <t-select
          v-model="formData.storage"
          :disabled="formData.id !== undefined"
          placeholder="请选择存储器"
          :options="dictionaryStore.get('infra_file_storage','number')"
          :readonly="readonly"
        >
        </t-select>
      </t-form-item>
      <!-- DB -->
      <!-- Local / FTP / SFTP -->
      <t-form-item
        v-if="formData.storage >= 10 && formData.storage <= 12"
        label="基础路径"
        name="config.basePath"
        :rules="[{ required: true, message: '基础路径不能为空' }]"
      >
        <t-input v-model="formData.config.basePath" placeholder="请输入基础路径" :readonly="readonly" />
      </t-form-item>
      <t-form-item
        v-if="formData.storage >= 11 && formData.storage <= 12"
        label="主机地址"
        name="config.host"
        :rules="[{ required: true, message: '主机地址不能为空'}]"
      >
        <t-input v-model="formData.config.host" placeholder="请输入主机地址" :readonly="readonly" />
      </t-form-item>
      <t-form-item
        v-if="formData.storage >= 11 && formData.storage <= 12"
        label="主机端口"
        name="config.port"
        :rules="[{ required: true, message: '主机端口不能为空' }]"
      >
        <t-input-number v-model="formData.config.port" :min="0" placeholder="请输入主机端口" :readonly="readonly"/>
      </t-form-item>
      <t-form-item
        v-if="formData.storage >= 11 && formData.storage <= 12"
        label="用户名"
        name="config.username"
        :rules="[{ required: true, message: '用户名不能为空' }]"
      >
        <t-input v-model="formData.config.username" placeholder="请输入密码" :readonly="readonly"/>
      </t-form-item>
      <t-form-item
        v-if="formData.storage >= 11 && formData.storage <= 12"
        label="密码"
        name="config.password"
        :rules="[{ required: true, message: '密码不能为空' }]"
      >
        <t-input v-model="formData.config.password" placeholder="请输入密码" :readonly="readonly"/>
      </t-form-item>
      <t-form-item v-if="formData.storage === 11" label="连接模式" name="config.mode" :rules="[{ required: true, message: '连接模式不能为空' }]">
        <t-radio-group v-model="formData.config.mode" :readonly="readonly">
          <t-radio value="Active">主动模式</t-radio>
          <t-radio value="Passive">被动模式</t-radio>
        </t-radio-group>
      </t-form-item>
      <!-- S3 -->
      <t-form-item v-if="formData.storage === 20" label="节点地址" name="config.endpoint" :rules="[{ required: true, message: '节点地址不能为空' }]">
        <t-input v-model="formData.config.endpoint" placeholder="请输入节点地址" :readonly="readonly"/>
      </t-form-item>
      <t-form-item v-if="formData.storage === 20" label="存储 bucket" name="config.bucket" :rules="[{ required: true, message: '存储 bucket 不能为空' }]">
        <t-input v-model="formData.config.bucket" placeholder="请输入 bucket" :readonly="readonly" />
      </t-form-item>
      <t-form-item v-if="formData.storage === 20" label="accessKey" name="config.accessKey" :rules="[{ required: true, message: 'accessKey 不能为空' }]">
        <t-input v-model="formData.config.accessKey" placeholder="请输入 accessKey" :readonly="readonly" />
      </t-form-item>
      <t-form-item v-if="formData.storage === 20" label="accessSecret" name="config.accessSecret" :rules=" [{ required: true, message: 'accessSecret 不能为空' }]">
        <t-input v-model="formData.config.accessSecret" placeholder="请输入 accessSecret" :readonly="readonly" />
      </t-form-item>
      <!-- 通用 -->
      <t-form-item v-if="formData.storage === 20" label="自定义域名" >
        <!-- 无需参数校验，所以去掉 name -->
        <t-input v-model="formData.config.domain" placeholder="请输入自定义域名" :readonly="readonly" />
      </t-form-item>
      <t-form-item v-else-if="formData.storage" label="自定义域名" name="config.domain" :rules="[{ required: true, message: '自定义域名不能为空' }]">
        <t-input v-model="formData.config.domain" placeholder="请输入自定义域名" :readonly="readonly"/>
      </t-form-item>
    </custom-dialog>
 
</t-card>
</template>
<script lang="ts">
export default {
  name: 'ApproveFileConfig',
};
</script>
<script lang="ts" setup>
import dayjs from 'dayjs';
import { DialogPlugin, MessagePlugin, TableCol } from 'tdesign-vue-next';
import { onMounted, ref, useTemplateRef } from 'vue';

import { fileConfigCRUD, testFileConfig, updateFileConfigMaster } from '@/api/system/file-config';
import CustomDialog from '@/components/custom/dialog/index.vue';
import CustomSearch from '@/components/custom/search/index.vue';
import CustomTable from '@/components/custom/table/index.vue';
import { useDictionaryStore } from '@/store';

// 字典仓库
const dictionaryStore = useDictionaryStore();





// 表格列定义
const columns: TableCol[] = [
  { colKey: 'id', title: '编号', width: 100 },
  { colKey: 'name', title: '配置名', width: 200 },
  { colKey: 'storage', title: '存储器', width: 200 },
  { colKey: 'remark', title: '备注', ellipsis: true },
  { colKey: 'master', title: '主配置', width: 100 },
  { colKey: 'createTime', title: '创建时间', width: 180 },
  { colKey: 'op', title: '操作', width: 240, fixed: 'right' }
]
// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  customDialogRef.value.open(mode, params);
};
// 自定义搜索ref
const customSearchRef = useTemplateRef('customSearchRef');
// 自定义表格ref
const customTableRef = useTemplateRef('customTableRef');

// 处理初始化表格
const handleInitTable = () => {
  const params = { ...customSearchRef.value.params };
  customTableRef.value.initTable(params);
};
// 处理刷新表格
const handleRefreshTable = () => {
  customTableRef.value.refreshTable();
};
// 处理删除
const handleDelete = (params: Record<string, any>) => {
  fileConfigCRUD
    .delete(params)
    .then(() => {
      MessagePlugin.success('删除成功');
      handleRefreshTable();
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};
// 处理主配置
const handleMaster = (id: number) => {
  updateFileConfigMaster(id)
    .then(() => {
      MessagePlugin.success('删除成功');
      handleRefreshTable();
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};
/** 测试按钮操作 */
const handleTest =  (id: any) => {
    testFileConfig(id).then(res => {
      const confirmDia = DialogPlugin({
      header:'测试上传成功',
      body: '是否要访问该文件？',
      confirmBtn: '确定',
      cancelBtn: '取消',
      onConfirm: () => {
        window.open(res, '_blank')
        confirmDia.hide()
      },
      onClose: () => {
        // 用户点击“取消”或关闭弹窗时的操作
        confirmDia.hide()
      },
    });
    }).catch(({ message }) => {
      MessagePlugin.error(message);
    });
    
}
onMounted(() => {
  handleInitTable();
});
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
  if (result.mode === 'create') handleInitTable();
  if (result.mode === 'update') handleRefreshTable();
};
</script>

<style lang="less" scoped>
.list-card {
  margin-bottom: 16px;
}
</style>
